<template>
	<div :class="curClassName" :style="curStyle">
		<div
			v-if="Object.is(labelPos, 'NONE') || !labelPos"
			class="app-panel-field__editor"
		>
			<div
				:class="{ 'check-error': !valueCheck, 'panel-editor-container': true, ...editorClassName}"
			>
				<slot></slot>
				<span v-if="!valueCheck" class="error-info">{{ error }}</span>
			</div>
		</div>
		<div v-if="!Object.is(labelPos, 'NONE')" class="app-panel-field-label">
			<span v-if="required" style="color: red">* </span>
			<span v-if="showCaption">{{ caption }}</span>
		</div>
		<div
			v-if="
				Object.is(labelPos, 'BOTTOM') ||
				Object.is(labelPos, 'TOP') ||
				Object.is(labelPos, 'LEFT') ||
				Object.is(labelPos, 'RIGHT')
			"
			class="app-panel-field__editor"
		>
			<div
				:class="{ 'check-error': !valueCheck, 'panel-editor-container': true, ...editorClassName }"
			>
				<slot></slot>
				<span v-if="!valueCheck" class="error-info">{{ error }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { panelFieldProps } from './panel-field';
const props = defineProps(panelFieldProps);

/**
 * 项名称
 *
 * @memberof AppPanelField
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppPanelField
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 编辑器动态样式
 *
 * @memberof AppPanelField
 */
 const editorClassName = computed(()=>{
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getEditorDynaClass();
	}
})

/**
 * 类名
 *
 * @memberof AppPanelField
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
    const classNames = {
		'app-panel-field': true
	};
	if (layoutModel) {
		switch (layoutModel.labelPos) {
			case 'TOP':
                Object.assign(classNames, {
                    'label-top': true,
                })
				break;
			case 'LEFT':
                Object.assign(classNames, {
                    'label-left': true,
                })
				break;
			case 'BOTTOM':
                Object.assign(classNames, {
                    'label-bottom': true,
                })
				break;
			case 'RIGHT':
                Object.assign(classNames, {
                    'label-right': true,
                })
				break;
			case 'NONE':
                Object.assign(classNames, {
                    'label-none': true,
                })
				break;
		}
        Object.assign(classNames, {
			[itemName.value]: true
		});
		Object.assign(classNames, layoutModel.getClassNames());
		if (layoutModel.sysCss) {
			Object.assign(classNames, {
				[layoutModel.sysCss]: true
			});
		}
	}
    return classNames;
});

/**
 * 标题
 *
 * @memberof AppPanelField
 */
const caption = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.caption;
	}
});

/**
 * 显示标题
 *
 * @memberof AppPanelField
 */
const showCaption = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.isShowCaption;
	}
});

/**
 * 标签位置
 *
 * @memberof AppPanelField
 */
const labelPos = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.labelPos || 'LEFT';
	}
	return 'LEFT';
});

/**
 * 必填
 *
 * @memberof AppPanelField
 */
const required = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.required;
	}
});

/**
 * 错误信息
 *
 * @memberof AppPanelField
 */
const error = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.error || `${caption.value} 值不能为空！`;
	}
});

/**
 * 值改变
 *
 * @memberof AppPanelField
 */
const valueChange = ref(false);

/**
 * 值校验
 *
 * @memberof AppPanelField
 */
const valueCheck = computed(() => {
	let valueCheck = true;
	if (required.value && !props.value && valueChange.value) {
		valueCheck = false;
	}
	return valueCheck;
});

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		valueChange.value = true;
	}
);
</script>
